<template>
    <!-- 通用组件 - 表单补充  -->
    <div class="form-item" @click="myClick()">
        <div class="form-title" :class="{top:align=='top'}">{{title}}<span style="color: red" v-if="notNull">*</span></div>
        <div class="form-value" :style="{textAlign:valAlign}" v-if="tag=='input'">
            <input @input="inputValue" v-model="formData.value" type="text" :placeholder="placeholder" readonly v-if="readonly">
            <input @input="inputValue" v-model="formData.value" type="text" :placeholder="placeholder" v-else>
        </div>
        <div class="form-value" :style="{textAlign:valAlign}" v-else-if="tag=='number' && readonly">
            <input @input="inputValue" v-model="formData.value" type="number" :placeholder="placeholder" readonly>
        </div>
        <div class="form-value" :style="{textAlign:valAlign}" v-else-if="tag=='number' && !readonly">
            <input @input="inputValue" v-model="formData.value" type="number" :placeholder="placeholder">
        </div>
        <div class="form-value" :style="{textAlign:valAlign}" v-else-if="tag=='textarea'">
            <textarea @input="inputValue" rows="3" :placeholder="placeholder" readonly v-if="readonly"></textarea>
            <textarea @input="inputValue" rows="3" :placeholder="placeholder" v-else></textarea>
        </div>
        <div class="form-value" :style="{textAlign:valAlign}" v-else :class="{'txt-gray':placeholder}">
            <slot>{{placeholder}}</slot>
        </div>
        <div class="form-icon" v-if="icon">
            <svg
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="100%"
                    height="100%"
            >
                <path
                        d="M595.858286 512l-206.518857-206.482286a18.285714 18.285714 0 0 1 25.892571-25.892571l219.428571 219.428571a18.285714 18.285714 0 0 1 0 25.892572l-219.428571 219.428571a18.285714 18.285714 0 0 1-25.892571-25.892571L595.858286 512z"
                ></path>
            </svg>
        </div>
        <div v-if="suffix">
            {{suffix}}
        </div>
    </div>
</template>


<script>
    /* eslint-disable no-console */

    export default {
        props: {
            suffix: {
                type: [String]
            },
            title: {
                type: [String]
            },
            placeholder: {
                type: [String]
            },
            align: {
                type: [String]
            },
            // 值域文本对齐位置
            valAlign: {
                type: [String]
            },
            // html标签 ，默认普通文本
            tag: {
                type: [String],
                default: "text"
            },
            icon: {
                type: [Boolean, String],
                default: false
            },
            notNull: {
                type: [Boolean, String],
                default: false
            },
            readonly: {
                type: [Boolean, String],
                default: false
            },
            value: null
        },
        data() {
            return {
                formData: {
                    value: this.value
                }
            };
        },
        methods: {
            inputValue() {
                this.$emit("input", this.formData.value);
            },
            myClick:function () {
                this.$emit('myClickHandler');
            }
        }
    };
</script>

<style>
    .form-item {
        display: flex;
        align-items: center;

    }

    .form-item .form-icon {
        height: 20px;
        width: 26px;
    }

    .form-item .txt-gray {
        color: #999;
    }

    .form-item .form-title {
        width: 100px;
        text-align: left;
    }

    .form-item .form-title .top {
        align-self: flex-start;
    }

    .form-item .form-value {
        flex-grow: 1;
    }

    .form-item .form-value .none {
        border: none;
    }

    .form-item .form-value input {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        border: none;
        outline: none;
    }

    .form-item .form-value textarea {
        border: none;
        outline: none;
        width: 100%;
        resize: none;
    }
</style>
